<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="utf-8" />
		<title>Příklad 3-7</title>
		<meta name="author" content="Daniel Bielczyk" />
	</head>
	<body style="margin: 0; padding: 0;">
		
		<canvas width="400" height="400" id="canvas"></canvas>
    
<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.lineWidth = 20;

context.moveTo(20, 20);
context.lineTo(60, 20);
context.stroke();

context.beginPath();
context.lineCap = "square";
context.moveTo(20, 50);
context.lineTo(60, 50);
context.stroke();

context.beginPath();
context.lineCap = "round";
context.moveTo(20, 80);
context.lineTo(60, 80);
context.stroke();

context.lineCap = "butt";

context.beginPath();
context.lineJoin = "bevel";
context.moveTo(100, 20);
context.lineTo(140, 20);
context.lineTo(100, 80);
context.stroke();

context.beginPath();
context.lineJoin = "round";
context.moveTo(170, 20);
context.lineTo(210, 20);
context.lineTo(170, 80);
context.stroke();

context.beginPath();
context.lineJoin = "miter";
context.moveTo(240, 20);
context.lineTo(280, 20);
context.lineTo(240, 80);
context.stroke();

context.beginPath();
context.lineJoin = "miter";
context.miterLimit = 2;
context.moveTo(310, 20);
context.lineTo(350, 20);
context.lineTo(310, 80);
context.stroke();

</script>
		
	</body>
</html>